<template>
  <li>
		<label>
			<!-- 展示数据 -->
			<input type="checkbox" :checked="its.done" @change="setcheck(its.id)"/>
			<span v-show="!its.iseidt">{{its.name}}</span>
			<input type="text"
			 v-show="its.iseidt"
			:value="its.name" 
			@blur="update(its,$event)"
			ref="jd"
			> 
			<!-- event可以让收的人收到改变后的数据 -->
		</label>
		<button class="btn btn-danger" @click="setdelete(its.id)">删除</button>
		<button class="btn btn-danger" v-show="!its.iseidt" @click="edit(its)">编辑</button>
	</li>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
 name:'MyItem',
 props:['its'],
 methods:{
	setcheck(id){
    //将数据传给app
    //    this.setitems(id)
	   this.$bus.$emit('setitems',id)
	},
	setdelete(id){
	//删除数据
	if(confirm('您确认删除吗'))
	//   this.deleteid(id)
	pubsub.publish('deleted',id)
	//   this.$bus.$emit('deleteid',id)
	},
	edit(its){
		//如果有iseidt属性就设置成true
		if(its.hasOwnProperty('iseidt')){
         its.iseidt = true
		}else{
		//如果没有就设置一个
          this.$set(its,'iseidt',true)
		}
		this.$nextTick(function(){
			this.$refs.jd.focus()
		})
       
	},
	update(its,e){
		its.iseidt= false
		if(!e.target.value.trim()) return alert('不能为空')
		console.log(e.target.value,its.id)
        // pubsub.publish('alter',its.id,e.target.value)
		this.$bus.$emit('alter',its.id,e.target.value)
	}
 }
}
</script>
<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin:3px 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
</style>